<template>
  <view class="content">
    <!-- 使用封装的顶部导航组件 -->
    <NavigationBar :title="isProduct == 0 ? '预约购买成功' : '预约成功'" />

    <!-- 主内容区域 -->
    <view class="flex-1 pt-[14rpx] pb-[33rpx]">
      <!-- 预约成功卡片 -->
      <view
        class="bg-white rounded-lg pt-[55rpx] pb-[33rpx] px-[88rpx] shadow-sm mb-4"
        v-if="isProduct === 1"
      >
        <view class="text-center mb-3">
          <text class="text-lg font-bold mb-2 text-[#000] text-[40rpx]"
            >您已预约成功！</text
          >
          <view class="text-sm text-[#565656] mt-[9rpx] mb-4"
            >入馆请向工作人员出示二维码，感谢配合！</view
          >
        </view>

        <!-- 二维码 -->
        <view class="flex justify-center mb-5">
          <QRCode
            :url="qrCodeUrl ?? 'https://www.baidu.com'"
            :size="118"
            background="#fff"
            foreground="#000"
          />
        </view>

        <!-- 取消预约提示 -->
        <view class="text-xs text-[#A6A6A6] text-center">
          <text
            >如需取消预约，请提前 6 小时，超时扣取 30% 违约金，会员可免
            1次/月</text
          >
        </view>
      </view>
      <!-- 产品预约成功卡片 -->
      <view
        class="bg-gradient-to-br from-white to-[#FFF8F0] rounded-[24rpx] pt-[60rpx] pb-[50rpx] px-[50rpx] shadow-lg mb-6 border border-[#F5F5F5]"
        v-else
      >
        <!-- 成功图标和标题 -->
        <view class="text-center mb-8">
          <!-- 成功图标容器 -->
          <view class="relative mb-6">
            <view
              class="w-[160rpx] h-[160rpx] mx-auto bg-gradient-to-br from-[#4CAF50] to-[#45A049] rounded-full flex items-center justify-center shadow-lg"
            >
              <text class="text-[100rpx] text-white font-bold">✓</text>
            </view>
            <!-- 装饰性光环 -->
            <view
              class="absolute inset-0 w-[160rpx] h-[160rpx] mx-auto bg-gradient-to-br from-[#4CAF50] to-[#45A049] rounded-full opacity-20 animate-pulse"
            ></view>
          </view>

          <!-- 主标题 -->
          <text class="text-[44rpx] font-bold mb-4 text-[#2C2C2C] block"
            >预约购买成功！</text
          >

          <!-- 副标题和说明 -->
          <view
            class="text-[28rpx] text-[#666666] mt-[20rpx] leading-relaxed space-y-2"
          >
            <text class="block text-[#4A4A4A]">感谢您的预约购买</text>
            <text class="block text-[#D7A56B] font-semibold text-[30rpx] mt-2"
              >请携带有效证件前往门店支付并领取产品</text
            >
          </view>
        </view>

        <!-- 底部装饰 -->
        <view class="flex justify-center items-center mt-6">
          <view
            class="flex items-center text-[#D7A56B] text-[26rpx] bg-gradient-to-r from-[#FFF8F0] to-[#FEF5E7] px-6 py-3 rounded-full border border-[#F0E6D2]"
          >
            <text class="mr-2 text-[28rpx]">✨</text>
            <text class="font-medium">祝您美丽每一天</text>
            <text class="ml-2 text-[28rpx]">✨</text>
          </view>
        </view>
      </view>

      <view class="bg-white rounded-[16rpx] px-[30rpx] py-[40rpx]">
        <!-- 预约详情部分 -->
        <view
          class="w-full flex justify-between items-center pb-[40rpx] border-[#E5E5E5] border-dashed border-b-[2px]"
        >
          <text class="font-medium text-[#252523] text-[32rpx] font-500"
            >预约详情</text
          >
          <text
            class="rounded-full px-[40rpx] py-[14rpx] border border-yellow-600 text-yellow-600 text-sm w-[200rpx]"
            @click.stop="handleCancelOrder(orderDetail.projectId)"
          >
            取消预约
          </text>
        </view>

        <!-- 预约信息列表 -->
        <view
          class="mt-[42rpx]"
          style="
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 100px;
          "
        >
          <view class="flex">
            <text class="text-[#686868] w-[160rpx]">{{
              orderDetail.isProduct == 1 ? "预约时间" : "创建时间"
            }}</text>
            <text>{{
              orderDetail.isProduct == 1
                ? orderDetail.appointmentDate
                : orderDetail.createTime
            }}</text>
          </view>
          <view class="flex" v-if="orderDetail.isProduct == 1">
            <text class="text-[#686868] w-[160rpx]">预约医师：</text>
            <text>{{ orderDetail.doctorName ?? "-" }}</text>
          </view>
          <view class="flex mb-[36rpx]">
            <text class="text-[#686868] w-[160rpx]">预约项目：</text>
            <text>{{ orderDetail.projectName ?? "-" }}</text>
          </view>
        </view>

        <!-- 产品卡片 -->
        <view
          class="mt-3 border-2 border-[#D7A56B] rounded-[16rpx] overflow-hidden"
        >
          <view class="flex p-1">
            <image
              :src="upload_url + orderDetail.projectImage"
              class="w-[258rpx] h-[189rpx] rounded"
              mode="aspectFill"
            ></image>
            <view class="flex-1 ml-3 flex flex-col justify-between mt-[24rpx]">
              <text class="text-base text-[#252523] text-[36rpx]">{{
                orderDetail.projectName ?? "-"
              }}</text>
              <view class="flex items-center mb-[29rpx]">
                <text class="text-xs text-[#252523] text-[28rpx]">优惠价¥</text>
                <text class="text-[#252523] ml-1 text-xl">{{
                  orderDetail.price ?? "-"
                }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { getOrderDetail, type OrderDetailResponseData } from "@/api/home";
import { onLoad } from "@dcloudio/uni-app";
import QRCode from "@/components/qrCode/index.vue";
import NavigationBar from "@/components/navigationBar/index.vue";
import { getQrCodeUrl } from "@/api";
import { cancelOrder as apiCancelOrder } from "@/api/shop";
import { upload_url } from "@/utils/config";
const qrCodeUrl = ref("");
const id = ref<number>(0);
const isProduct = ref<number>(0);

onLoad((options: Record<string, any> = {}) => {
  id.value = Number(options.id) || 0;
  isProduct.value = Number(options.isProduct) || 0; // 0产品 1项目
  handleGetQrCodeUrl();
  handleGetOrderDetail();
});

const orderDetail = ref<OrderDetailResponseData>({} as OrderDetailResponseData);
const handleGetOrderDetail = () => {
  getOrderDetail(id.value).then((res) => {
    orderDetail.value = res.data;
  });
};
// 取消订单
const handleCancelOrder = (id: number) => {
  uni.showModal({
    title: "提示",
    content: "确定要取消此订单吗？",
    success: (res) => {
      if (res.confirm) {
        console.log(id, "id");

        // 调用取消订单API
        apiCancelOrder(id)
          .then((res: any) => {
            if (res.code === 200) {
              uni.showToast({
                title: "订单已取消",
                icon: "none",
              });
              uni.navigateBack();
            } else {
              uni.showToast({
                title: res.message || "取消订单失败",
                icon: "none",
              });
            }
          })
          .catch(() => {
            uni.showToast({
              title: "取消订单失败",
              icon: "none",
            });
          });
      }
    },
  });
};
// 获取二维码、
const handleGetQrCodeUrl = () => {
  getQrCodeUrl().then((res) => {
    qrCodeUrl.value = res.data;
  });
};
</script>

<style></style>
